// import { LockOutlined, UserOutlined } from "@ant-design/icons";
import { Button, Checkbox, Form, Input, message, Card } from "antd";
import { Login } from "./service";
import React ,{ useState} from 'react';

const LoginCmp = (props) => {
  // let loading=true;
  const onFinish = async (values) => {
    // onFinish 的入参就是表单数据
    console.log("Received values of form: ", values);
    const { code, msg, token } = (await Login(values)) || {};
    if (code) {
      message.error(msg);
      return;
    }
    message.success(msg,1, () => {
      console.log("提示消失");
      localStorage.setItem("token", token);
      props.history.replace("/home");
    });
  };
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  const [loadings, setLoadings] = useState([]);

  const enterLoading = (index) => {
    setLoadings((prevLoadings) => {
      const newLoadings = [...prevLoadings];
      newLoadings[index] = true;
      return newLoadings;
    });
    setTimeout(() => {
      setLoadings((prevLoadings) => {
        const newLoadings = [...prevLoadings];
        newLoadings[index] = false;
        return newLoadings;
      });
    }, 3000);
  };
  return (
     <>
    <div style={{
      width: '100vw',
      height:'100vh',
      display:'flex',
      justifyContent:'center',
      alignItems: 'center',
      backgroundImage: 'url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2Fdf%2F55%2F37%2Fdf5537f964e539b1596ec059a67fffa5.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663404611&t=7ef69ff0ba59efaa50a04e52d5172bca)',
      backgroundRepeat: 'no-repeat',
      backgroundSize: '100%'
    }}>
    <Card style={{
      position:'absolute',
      right:'16vw',
      top:"10vw",
      width:'350px',
      height: '300px',
      backgroundColor:'#fff2d244',
     
      
    }}>
          <Form 
      name="basic"
      labelCol={{
        span: 5,
      }}
      wrapperCol={{
        span: 16,
      }}
      initialValues={{
        remember: true,
      }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
    >
      <Form.Item
        label="账号"
        name="userName"
        rules={[
          {
            required: true,
            // pattern:/^\d{9,12}$/,
            message: '请输入正确账号!',
          },
        ]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="密码"
        name="passWord"
        rules={[
          {
            required: true,
            min:4,
            message: '初始密码为身份证后六位，请及时修改                                                                                                                                                                                                                                                                                  !',
          },
        ]}
      >
        <Input.Password />
      </Form.Item>

      <Form.Item
        name="remember"
        valuePropName="checked"
        wrapperCol={{
          offset: 3,
          span: 16,
        }}
       
      >
        <Checkbox>记住我</Checkbox>
        <p style={{color:'#1890ff',margin:'10px'}}>忘记密码请联系管理员</p>
      </Form.Item>

      <Form.Item
        name='forgetText'
        wrapperCol={{
          offset: 3,
          span: 16,
        }}
      >
        {/* loadding 登录防抖 */}
        <Button type="primary" htmlType="submit" style={{
          width:'220px'
        }} loading={loadings[0]} onClick={() => enterLoading(0)}
        >
          登录
        </Button>
      </Form.Item>
    </Form>

    </Card>
    </div>
    </>
  );
};

export default LoginCmp;
